<template>
	<view class="flex-col homepage">
		<view class="u-line-1 text">请填写反馈信息</view>
		<view class="flex-row wrapper">
			<view class="u-line-1 text-two">投诉类型</view>
			<u-picker :show="show" :columns="columns" @cancel="show=false" keyName="label" @confirm="eee"></u-picker>
			<input class="input" @click="show = true" v-model="adds.type" placeholder="请选择投诉类型"></input>
			<view class="u-line-1 text-three">></view>
		</view>
		<view class="flex-row wrapper-two">
			<view class="u-line-1 text-four">问题描述</view>
			<u-input class="input-two" v-model="adds.till" placeholder="请输入投诉内容"></u-input>
		</view>
		<view class="flex-row wrapper-three">
			<view class="u-line-1 text-five">投诉人姓名</view>
			<view class="u-line-1 text-six">{{adds.userName}}</view>
			<view class="u-line-1 text-seven">></view>
		</view>
		<view class="flex-row wrapper-four">
			<view class="u-line-1 text-eight">手机号码</view>
			<view class="u-line-1 text-nine">{{adds.phone}}</view>
		</view>
		<u-button class="button" type="success" @click="tj">
			提交
		</u-button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
					input: "",
					user:{},
					adds:{},
					show: false,
					columns: [
						[
							{
								label: '物业服务',
								id: 1,
							}, {
								label: '公共设施',
								id: 2
							}, {
								label: '其他',
								id: 3
							}
						]
					]
			}
		},
		onLoad(){
			this.user = uni.getStorageSync('user')
			console.log(this.user)
			this.adds.userName=this.user.userName
			this.adds.phone=this.user.phone
			this.adds.userId=this.user.userId
		},
		methods: {
			tj(){
				this.adds.processingState="未处理"
				this.$axios({
					url: 'serverwg/gwb/GwbAddshenqing',
					data: this.adds,
					method: 'POST',
					success: (res) => {
						if (res.data.code === 20000) {
							uni.showModal({
								content: '添加成功,点击确认跳转页面',
								showCancel: false,
								success: (res) => {
									uni.navigateTo({
										url: '/pages/wjx/service'
									})
								}
							});
						} else {
							uni.showModal({
								content: '添加失败,请重试',
								showCancel: false,
							});
						}
					}
				})
				
			},
			eee(data) {
				console.log(data.value[0].label)
				this.adds.type=data.value[0].label
				this.show = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		height: 1334rpx;
		padding: 56rpx 35rpx 0rpx 35rpx;

		.text {
			width: 218rpx;
			margin: 0rpx 0rpx 36rpx 6rpx;
			font-size: 28rpx;
			font-weight: 600;
			color: #2b85e4;
		}

		.wrapper {
			width: 680rpx;
			margin-bottom: 10rpx;
			padding: 20rpx 0rpx;
			border-top-width: 2rpx;
			border-top-style: solid;
			border-top-color: rgba(226, 226, 226, 1);
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
			border-bottom-color: rgba(226, 226, 226, 1);

			.text-two {
				width: 142rpx;
				margin: 16rpx 84rpx 0rpx 0rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: rgba(103, 103, 103, 1);
			}

			.input {
				width: 258rpx;
				margin-right: 146rpx;
				border:none
			}

			.text-three {
				width: 26rpx;
				margin-top: 10rpx;
				font-size: 32rpx;
				color: rgba(171, 171, 171, 1);
			}
		}

		.wrapper-two {
			width: 680rpx;
			justify-content: space-between;
			padding: 10rpx 31rpx 10rpx 1rpx;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
			border-bottom-color: rgba(226, 226, 226, 1);

			.text-four {
				width: 140rpx;
				margin-top: 10rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: rgba(109, 109, 109, 1);
			}

			.input-two {
				width: 434rpx;
				height: 138rpx;
				border:none
			}
		}

		.wrapper-three {
			width: 680rpx;
			padding: 30rpx 0rpx 33rpx 0rpx;
			border-top-color: rgba(226, 226, 226, 1);
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
			border-bottom-color: rgba(226, 226, 226, 1);

			.text-five {
				width: 176rpx;
				margin: 6rpx 66rpx 0rpx 0rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: rgba(103, 103, 103, 1);
			}

			.text-six {
				width: 250rpx;
				margin: 10rpx 136rpx 0rpx 0rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(79, 79, 79, 1);
			}

			.text-seven {
				width: 26rpx;
				font-size: 32rpx;
				color: rgba(171, 171, 171, 1);
			}
		}

		.wrapper-four {
			width: 680rpx;
			justify-content: space-between;
			margin-bottom: 78rpx;
			padding: 36rpx 164rpx 37rpx 0rpx;
			border-top-color: rgba(226, 226, 226, 1);
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
			border-bottom-color: rgba(226, 226, 226, 1);

			.text-eight {
				width: 176rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: rgba(103, 103, 103, 1);
			}

			.text-nine {
				width: 272rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(79, 79, 79, 1);
			}
		}

		.button {
			width: 674rpx;
			height: 76rpx;
			background: rgba(11, 128, 237, 1);
			font-weight: 600;
		}
	}
</style>
